<template>
  <div class="outermostLayer" style="min-height: 90vh">
    <center>
      <div class="outermostContainer" v-for="(item, index) in resumeArr" :key="index">
        <div class="positionTitle">{{ item.positionName }}</div>
        <el-empty description="暂时未发现合适简历，请持续保持关注！" v-if="item.resumeRecommendList.length === 0" />
        <div style="display: flex; width: 85%; flex-wrap: wrap;justify-content: center;">
          <div class="container" v-for="(items, index) in item.resumeRecommendList" :key="index"
            style="display: flex; flex-direction: row">
            <div style="display: flex; flex-direction: column">
              <div class="company-name">{{ items.desiredPosition }}</div>
              <div>
                <div style="display: flex">
                  <span><svg-icon icon-name="companyIndustry"
                      style="width: 20px; height: 20px; margin-right: 3px"></svg-icon></span>
                  <div class="company-name" style="font-size: 16px; margin-right: 10px">
                    {{ items.education }}
                  </div>
                  <div class="company-name" style="font-size: 16px">
                    <span><svg-icon icon-name="salary" style="
                          width: 20px;
                          height: 20px;
                          margin-left: 5px;
                          margin-right: 3px;
                        "></svg-icon></span>
                    {{ items.minSalary }}-{{ items.maxSalary }}
                  </div>
                </div>
                <div style="display: flex">
                  <div class="company-name" style="font-size: 16px">
                    <span><svg-icon icon-name="school"
                        style="width: 20px; height: 20px; margin-right: 3px"></svg-icon></span>
                    {{ items.school }}
                  </div>
                </div>
                <div style="display: flex">
                  <div class="company-name" style="font-size: 16px">
                    <span><svg-icon icon-name="phone"
                        style="width: 20px; height: 20px; margin-right: 3px"></svg-icon></span>
                    {{ items.phone }}
                  </div>
                </div>
                <div class="company-name" style="font-size: 16px">
                  <span><svg-icon icon-name="email"
                      style="width: 20px; height: 20px; margin-right: 3px"></svg-icon></span>
                  {{ items.email }}
                </div>
              </div>
            </div>

            <div style="
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
              ">
              <div class="positionName">
                <el-button round @click="perviewResume(items.resumeUrl)">点击预览学生简历</el-button>
              </div>
              <div class="positionName">
                <el-button round @click="modState(item.id, items.userId, 5)">邀请学生投递简历</el-button>
              </div>
              <!-- <img
                v-show="items.avatar"
                :src="items.avatar"
                class="avatar"
                style="
                  width: 70px;
                  height: 70px;
                  border-radius: 50%;
                  matgin-right: 20px;
                  margin-left: 50px;
                "
              /> -->
            </div>

            <div style="">
              <div class="company-name" style="color: #333; font-size: 14px;">
                {{ items.studentName }}
              </div>
              <div class="company-name">
                <img v-show="items.avatar" :src="items.avatar" class="avatar" style="
                  width: 70px;
                  height: 70px;
                  border-radius: 50%;
                " />
              </div>
            </div>
            <!-- <div>
                  <span style="color: #333; font-size: 14px; writing-mode: vertical-rl;">提交时间：</span>
  <span style="color: #333; font-size: 14px; writing-mode: vertical-rl;">{{item.startTime}}</span>
                </div> -->
          </div>
          <div style="display: flex; justify-content: center; width: 100%">
            <el-pagination v-model:current-page="currentPage" :hide-on-single-page="true" :page-size="12" :size="size"
              :background="true" layout="total, prev, pager, next" :total="total"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </center>

    <el-dialog v-model="dialogVisible" title="在线预览附件简历" width="1000" :before-close="handleClose">
      <div>
        <iframe id="resume-iframe" :src="pdfUrl" style="width: 100%; height: 100vh"></iframe>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { getResume, getResumes } from "@/api/attachmentResume";
import { submitResume } from "@/api/position";
import type { ComponentSize } from "element-plus";

//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");
const resumeArr = ref([]);
const queryResume = async () => {
  const res = await getResumes(currentPage.value, 10);
  resumeArr.value = res.data.list;
  console.log(resumeArr.value);
};
queryResume();

//分页变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  queryResume();
};

// 预览简历
const dialogVisible = ref(false);
const pdfUrl = ref();
const perviewResume = (url) => {
  pdfUrl.value = url;
  dialogVisible.value = true;
};

//修改面试状态
const modState = async (positionNameId, userId, status) => {
  const res = await submitResume(positionNameId, userId, '', status);
  if (res.code === 200) {
    ElMessage({
      message: "邀请成功",
      type: "success",
    });
    queryResume();
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
};
</script>

<style lang="scss" scoped>
ul {
  padding-left: 0;
  list-style-type: none;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
  border: 1px solid #ccc;
  width: 450px;
  //   box-shadow: 20px 20px 50px #000;
  /* filter: blur(6px); */
  // background: rgba(255, 255, 255, 0.3);
  background: rgba(89, 165, 245, 0.2);
  backdrop-filter: blur(10px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
  border-radius: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.container:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.header {
  display: flex;
  width: 100%;
}

.right {
  width: 100%;
  display: flex;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.company-name {
  color: #333;
  //   width: 100%;
  font-size: 20px;
  margin-bottom: 10px;
}

.header .right .position,
.header .right .year {
  width: calc(50% - 10px);
  box-sizing: border-box;
  color: #333;
}

.positionName {
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #333;
}

.middle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.place {
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #333;
}

.middle .right {
  width: 71%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.education {
  width: calc(50% - 10px);
  box-sizing: border-box;
  color: #333;
}

.salary {
  width: calc(50% - 10px);
  color: #333;
  box-sizing: border-box;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.footer .classify {
  width: 29%;
  padding: 10px;
  box-sizing: border-box;
}

.footer .descibe {
  width: 71%;
  padding: 5px;
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  /* 限制显示 6 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

//发布新岗位按钮
#fbht {
  background: linear-gradient(rgb(104, 104, 255),
      rgb(164, 108, 255),
      rgb(192, 116, 255));
  text-align: center;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 2px 4px 5px lightgray;
  cursor: pointer;
}

.card {
  display: flex;
  height: 0px;
  padding: 3% 7%;
  align-items: center;
  justify-content: center;
}

.card p {
  margin: 0;
}

.detel {
  width: 50px;
  height: 30px;
  margin: 10px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid red;
  color: red;
  background: transparent;
  text-align: center;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.detel:hover {
  background-color: red;
  color: #fff;
}

.positioning {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.outermostContainer {

  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

.positionTitle {
  background-color: rgba(0, 102, 140, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  font-family: SimSun, '宋体', sans-serif;
  font-weight: bold;
  padding-top: 10px;
}
</style>